<!-- 面包xie -->
<!-- 实现思路：
1.通过watch监听路由route属性的变化 
2.router.matched可以返回一个数组，数组内容是路径路由和上一路径的所有信息
3.通过取出name属性和path属性的单独数组，来渲染面包屑组件实现 -->
<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item,index) in mbarr"><a :href="patharr[index]" style="color: white; font-size: 18px;">{{ item }}</a></el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang='js'>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from "vue-router";
const route = useRoute()
const mbarr = ref([])
const patharr = ref([])

onMounted(() => {
  patharr.value = route.matched.map(item => item.path)
  mbarr.value = route.matched.map(item => item.name)
})

watch(route, () => {
  mbarr.value = route.matched.map(item => item.name)
  patharr.value = route.matched.map(item => item.path)
})
</script>

<style  scoped>
.el-breadcrumb {
  font-size: 20px;
}
</style>
